<template>
<div class="tpl37-goods">
  <div class="slider-goods">

    <!-- TODO 小程序使用微信组件滚动 -->
    <wx-scroll-view :scroll-x="canScrollX">
      <ul class="slider-goods-box" >
        <li :class="['slider-goods-item','slider-item-length'+ length]" v-for="(goods,index) in tplItemData.goodslist" :key="index">
          <a class="goodsimg" @click="openLink(goods.link)">
            <img
              :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
              alt
            />
          </a>
          <div class="goods-info">
            <a  @click="openLink(goods.link)"
                class="title" 
                v-if="tplItemData.showName&&tplItemData.showName==1">     
                {{goods.title}}
            </a>
            <p class="pic_box">
              <span class="goods-pirce" v-html="scaleGoodsPriceFn(goods.price)"></span>
            </p>
            <p class="pic_box">
              <s class="original-price" v-if="goods.original_price">&yen;{{goods.original_price}}</s>
            </p>
            <a class="addcart">
              <i class="shop-car" v-if="goods.is_try==1 || goods.is_miao==1 || goods.is_bargin==1 || goods.is_crowd==1 || goods.is_limit_discount==1 || goods.is_group_shopping==1 || goods.is_auction==1 || goods.num<=0" @click="openLink(goods.link)"></i>
              <i v-else @click="handleOpenSkuDialog(goods)"></i>
            </a>
          </div>
        </li>
      </ul>
    </wx-scroll-view>
  </div>
  <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
</div>
  
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import skuDialog from '@/views/item/components/skuDialog'
import Scroll from '@/components/scroll/index'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  components: {
    Scroll,
    skuDialog
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {

        }
      }
    }
  },
  data() {
    return {
      // goodstyle:
      canScrollX: true,
      length: 0,
      skuDialogVisible: false,
      itemId: 0
    }
  },
  created() {
    // console.log(this.tplItemData)
    this.length = this.tplItemData.goodslist.length
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data) {
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true
        that.itemId = Number(data.item_id)
      }
      // this.skuDialogVisible = true
      // this.itemId = Number(data.item_id)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl37-goods{
  .slider-goods{
    overflow: hidden;
    white-space: nowrap;
    a{
      display: block;
    }
    .slider-goods-box{
      display: inline-block;
      white-space: nowrap;
      .slider-goods-item{
        width: 244px;
        margin: 0 6px 14px 8px;
        display: inline-block;
        &.slider-item-length2{
        width: calc((750px - 28px)/ 2);
        }
        &.slider-item-length3{
          width: calc((750px - 42px)/ 3);
        }
        // 图片样式
        .goodsimg{
          position: relative;
          padding-top: 100%;
          overflow: hidden;
          img{
            position: absolute;
            top: 0;
            width: 100%;
            border-radius: 12px;
          } 
        }
        // 商品信息
        .goods-info{
          position: relative;
          .title{  
            padding: 8px 0 6px;
            @include lineClamp(24px,32px,1);
            display: block;
            &.titleLine{
              @include lineClamp(26px,38px,2);
              display: block;
            }
          }
          .pic_box{
            overflow: hidden;
            padding-top: 5px;
            .original-price{
              color: #999999;
              font-size: 22px;
            }
          }
          .addcart{
            height: 58px;
            width: 58px;
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            background: #f5f5f5;
            border-radius: 50%;
            border: 0;
            i{
              display: block;
              width: 30px;
              height: 30px;
              margin: 14px 0 0 14px;
              background: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl37/add-cart.png') no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }
  }
}
</style>
